<template>
<!--    <el-image-->
<!--            style="width: 1000px; height: 1000px"-->
<!--            src="../../public/carp.jpg"-->
<!--            fit="contain"></el-image>-->
    <div class="box">
        <div class="boximg">
            <img class="imghead" src="carp2.jpg"/>
        </div>
        <div class="boxnav">
            <div @click="num=2" class="nav-item1">
                <i style="font-size: 48px"  class="el-icon-menu"></i>
                <span>全部</span>
                <span class="span_num"><strong>{{total}}</strong></span>
            </div>
            <div @click="num=0" class="nav-item1" >

                <i style="font-size: 48px"  class="el-icon-view"></i>
                <span>进行中</span>
                <span class="span_num"><strong>{{ing}}</strong></span>
            </div>
            <div @click="num=1" style="border-right-width: 0px;" class="nav-item1">
                <i style="font-size: 48px"  class="el-icon-check"></i>
                <span>结束</span>
                <span class="span_num"><strong>{{end}}</strong></span>
            </div>
        </div>

        <div class="content">
            <div v-for="(item,i) in productlist" v-bind:key="item" class="content-item">

                <div class="content-show">
                    <span class="title">{{item.school}}:{{item.userName}}</span>
                    <div class="content-img">
                        <el-image
                                style="width: 100%; height: 200px"
                                :src="'http://39.103.172.195:8000/'+item.productionUrl"
                                :preview-src-list="srcList">
                        </el-image>
                    </div>
                    <div class="content-button">
                        <el-progress :percentage="percentage[i]" :color="customColorMethod"><el-button  type="text">{{percentage[i]}}分</el-button></el-progress>
                        <el-input-number v-if="item.grade==0" style="float: left" v-model="percentage[i]" @change="handleChange" step="1" :min="0" :max="100" label="描述文字"></el-input-number>
                        <el-button v-if="item.grade==0" @click="submitscore(i)" style="width: 120px" type="primary">评分</el-button>
                        <el-button v-if="item.grade!=0"  type="text">{{item.grade}}</el-button>
                        <el-button  v-if="item.grade!=0" @click="opendig(i)" style="width: 120px;float: right" type="warning">修改评分</el-button>
                    </div>

                </div>

            </div>

        </div>
        <el-dialog title="修改评分" v-model="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="分数" :label-width="formLabelWidth">
                    <el-input v-model="form.score" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <template #footer>
    <span class="dialog-footer">
      <el-button style="width: 80px" @click="dialogFormVisible = false">取 消</el-button>
      <el-button style="width: 80px" type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </span>
            </template>
        </el-dialog>

        <el-pagination
                style="padding-bottom: 20px;"
                @current-change="handleCurrentChange"
                background
                :v-model="pagecurrent"
                :page-size="pagesize"
                layout="prev, pager, next"
                :total="totalsize">
        </el-pagination>

    </div>
</template>




<script>
    import {getproduction, setgrade} from "../network/admin";
    export default {
        created() {
            this.getlist(this.num)
            getproduction(this.id,this.pagecurrent,this.pagesize,0).then((res)=>{
                this.ing = res.data.total
            })
            getproduction(this.id,this.pagecurrent,this.pagesize,1).then((res)=>{
                this.end = res.data.total
            })
        },

        watch: {
            productlist:{
                handler(){
                    getproduction(this.id,this.pagecurrent,this.pagesize,0).then((res)=>{
                        this.ing = res.data.total
                    })
                    getproduction(this.id,this.pagecurrent,this.pagesize,1).then((res)=>{
                        this.end = res.data.total
                    })
                    getproduction(this.id,this.pagecurrent,this.pagesize,2).then((res)=>{
                        this.total = res.data.total
                    })
                }
            },
            num:{
                handler(){
                    this.getlist(this.num)
                }
            }

        },

        data() {
            return {
                srcList:[

                ],
                dialogFormVisible: false,
                form:{
                  score:''
                },
                total:'',
                pid:'',
                end:'',
                ing:'',
                num:'2',
                id:window.sessionStorage.getItem('token'),
                totalsize:'',
                productlist: [],
                pagecurrent:'1',
                pagesize: "6",
                percentage: [

                ],
                customColor: '#409eff',
                customColors: [
                    {color: '#f56c6c', percentage: 20},
                    {color: '#e6a23c', percentage: 40},
                    {color: '#5cb87a', percentage: 60},
                    {color: '#1989fa', percentage: 80},
                    {color: '#6f7ad3', percentage: 100}
                ]
            };
        },
        methods: {
            opendig(i){
                this.pid = this.productlist[i].id
                this.$prompt('请输入成绩', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/,
                    inputErrorMessage: '成绩输入只能0-100'
                }).then(({ value }) => {

                    this.percentage[i] = value
                    this.$message({
                        type: 'success',
                        message: "修改成功"
                    });
                    setgrade(this.pid,this.percentage[i]).then(()=>{
                        this.getlist(this.num)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            submitscore(i){
                this.pid = this.productlist[i].id
                if (this.percentage[i]==0){
                    this.$message({
                        type: 'error',
                        message: "成绩不能为0"
                    });
                }else {
                    this.$message({
                        type: 'success',
                        message: "评分成功！成绩是"+this.percentage[i]
                    });
                    setgrade(this.pid,this.percentage[i]).then(()=>{
                        this.getlist(this.num)
                    })
                }

            },
            getlist(num){
                this.percentage=  []
                getproduction(this.id,this.pagecurrent,this.pagesize,num).then((res)=>{
                    this.productlist = res.data.records
                    this.totalsize = res.data.total
                    console.log(this.productlist);
                    for (let i = 0;i<this.productlist.length;i++){
                        this.srcList.push('http://39.103.172.195:8000/'+this.productlist[i].productionUrl)
                        this.percentage.push(Number(this.productlist[i].grade))

                    }
                    console.log(this.percentage);
                })
            },
            customColorMethod(percentage) {
                if (percentage < 30) {
                    return '#909399';
                } else if (percentage < 70) {
                    return '#e6a23c';
                } else {
                    return '#67c23a';
                }
            },

            handleCurrentChange(val){
                this.pagecurrent = val;
                this.getlist(this.num)
            },
        }
    }
</script>

<style scoped>
.title{
    font-size: 18px;
    overflow: hidden;
}
.score{
    height: 35px;
}
.content-button{
    height: 85px;
}
.content-img{
    height: 200px;

}
.content-show{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
}

.content-img,
.content-button,
.title
{
    width: 100%;
    margin-bottom: 10px ;
}

    .content-item:hover{
        -webkit-box-shadow: #ccc 0px 0px 5px;
        -moz-box-shadow: #ccc 0px 0px 5px;
        box-shadow: rgb(204, 204, 204) 0px 0px 6px;
    }
.content-item{
    background: white;
    /*margin-top: 10px;*/
    /*margin-right: 10px;*/
    margin: 10px;
    width: 30%;
    height: 45%;
    float: left;
}
.content{
    margin: 20px auto;
    width: 80%;
    height: 815px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.nav-item1{
    flex: 1;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #eae8e8;
    cursor: pointer;
}
.nav-item1 span{
    padding-left: 10px;

}
.span_num{
    font-size: 24px;
    color: red;

}


.imghead{
    width: 100%;
    height: 100%;
}
.boximg{
    width: 100%;
    height: 350px;
    display: flex;

}
.boxnav{
    width: 100%;
    height: 80px;
    background: white;
    margin: auto;
    display: flex;
    flex-direction: row;
}
.box{
    width: 100%;
    height: 100%;
    background:#f4f4f4;
}
</style>
